<template>
    <v-row align=start>
        <v-col cols=12>
            <v-dialog v-model="dialog_msg" persistent width="300">
                <v-card>
                    <v-card-text>
                        <v-alert outlined v-model="dialog_msg" :type="alert_type">
                            {{alert_msg}}
                        </v-alert>
                    </v-card-text>
                    <v-card-text align="center">
                        <v-btn small @click="dialog_msg = false">关闭</v-btn>
                    </v-card-text>
                </v-card>
            </v-dialog>

            <v-card>
                <v-toolbar dark color="primary">
                    <v-toolbar-title align-center >编辑书籍信息</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-btn class='mr-2' color='red' :to="'/book/'+bookid" >取消</v-btn>
                    <v-btn color='green' @click="save_book">保存</v-btn>
                </v-toolbar>
                <v-card-text class="pa-0 pa-md-2">
                    <v-form>
                        <v-container>
                            <v-row>
                                <v-col class='py-0' cols=12 sm=6>
                                    <v-text-field label="书名" v-model="book.title">{{book.title}}</v-text-field>
                                </v-col>
                                <v-col class='py-4' cols=12 sm=6>
                                    <v-rating label="Rating" v-model="book.rating" color="yellow accent-4" length="10" dense ></v-rating>
                                </v-col>
                                <v-col class='py-0' cols=12 sm=6>
                                    <!-- AUTHORS -->
                                    <v-combobox v-model="book.authors" :items="book.authors" label="作者" :search-input.sync="author_input" hide-selected multiple small-chips>
                                        <template v-slot:no-data>
                                            <v-list-item>
                                                <span v-if="! author_input">请输入新的名称</span>
                                                <div v-else>
                                                    <span class="subheading">添加</span>
                                                    <v-chip color="green lighten-3" label small rounded> {{ author_input }} </v-chip>
                                                </div>
                                            </v-list-item>
                                        </template>
                                        <!-- author chip & close -->
                                        <template v-slot:selection="{ attrs, item, parent, selected }">
                                            <v-chip v-bind="attrs" color="green lighten-3" :input-value="selected" label small >
                                                <span class="pr-2"> {{ item }} </span>
                                                <v-icon small @click="parent.selectItem(item)" >close</v-icon>
                                            </v-chip>
                                        </template>
                                    </v-combobox>
                                </v-col>
                                <v-col class='py-0' cols=12 sm=6>
                                    <v-text-field label="丛书名称" v-model="book.series">{{book.series}}</v-text-field>
                                </v-col>
                                <v-col class='py-0' cols=12 sm=6>
                                    <v-text-field label="出版社" v-model="book.publisher">{{book.publisher}}</v-text-field>
                                </v-col>
                                <v-col class='py-0' cols=12 sm=6>
                                    <v-text-field label="出版日期" v-model="book.pubdate">{{book.pubdate}}</v-text-field>
                                </v-col>
                                <v-col class='py-0' cols=12 sm=6>
                                    <v-text-field label="ISBN编号" v-model="book.isbn">{{book.isbn}}</v-text-field>
                                </v-col>
                                <v-col class='py-0' cols=12 sm=6>
                                    <v-text-field label="语言" v-model="book.language">{{book.language}}</v-text-field>
                                </v-col>


                                <v-col class='py-0' cols=12>
                                    <!-- TAGS -->
                                    <v-combobox v-model="book.tags" :items="book.tags" label="标签列表" :search-input.sync="tag_input" hide-selected multiple small-chips>
                                        <template v-slot:no-data>
                                            <v-list-item>
                                                <span v-if="! tag_input">请输入新的标签名称</span>
                                                <div v-else>
                                                    <span class="subheading">添加标签</span>
                                                    <v-chip color="green lighten-3" label small rounded> {{ tag_input }} </v-chip>
                                                </div>
                                            </v-list-item>
                                        </template>
                                        <!-- tag chip & close -->
                                        <template v-slot:selection="{ attrs, item, parent, selected }">
                                            <v-chip v-bind="attrs" color="green lighten-3" :input-value="selected" label small >
                                                <span class="pr-2"> {{ item }} </span>
                                                <v-icon small @click="parent.selectItem(item)" >close</v-icon>
                                            </v-chip>
                                        </template>
                                    </v-combobox>
                                </v-col>
                                <v-col class='py-0' cols="12">
                                    <v-textarea small outlined rows="15" label="内容简介" v-model="book.comments" :value="book.comments" ></v-textarea>
                                </v-col>
                                <v-divider></v-divider>
                                <v-col align=center cols="12">
                                <v-btn dark color='green' @click='save_book'>保存</v-btn>
                                </v-col>
                            </v-row>
                        </v-container>

                    </v-form>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>
</template>

<script>
export default {
    components: {
    },
    computed: {
        pub_year: function() {
            if ( this.book === null ) {
                return "";
            }
            return this.book.pubdate.split("-")[0];
        },
    },
    data: () => ({
        bookid: 0,
        book: {'id': 0, 'files': [], 'tags': [], 'pubdate': ''},
        author_input: null,
        tag_input: null,
        debug: false,
        mail_to: "",
        dialog_kindle: false,
        dialog_msg: false,
        alert_msg: "please login",
        alert_type: "error",
    }),
    created() {
        this.init(this.$route);
    },
    beforeRouteUpdate(to, from, next) {
        this.init(to, next);
    },
    methods: {
        init(route, next) {
            this.$store.commit('navbar', true);
            this.$store.commit('loading');

            this.bookid = this.$route.params.bookid;
            this.backend("/book/" + this.bookid)
            .then( rsp => {
                this.book = rsp.book;
                this.$store.commit('loaded');
            });
            if ( next ) next();
        },
        save_book() {
            this.saving = true;
            this.backend("/book/"+this.bookid+"/edit", {
                method: "POST",
                body: JSON.stringify(this.book),
            })
            .then( rsp => {
                if ( rsp.err == 'ok' ) {
                    this.alert("success", "保存成功！");
                    this.$router.push("/book/"+this.bookid);
                } else {
                    this.alert("error", rsp.msg);
                }
            });
        }
    },
}
</script>

<style>
.book-img {
    /*
    margin-left: 16px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.12);
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
    */
}
.align-right {
    text-align: right;
}
.book-footer {
    padding-top: 0px;
    padding-bottom: 3px;
}
.tag-chips a {
    margin: 4px 2px;
}

</style>
